<template>
  <view class="catgory-wrap">
    <view class="u-flex wrapper-box">
      <!-- 左侧分类列表 -->
      <scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollLeftTop">
        <view v-for="(item, index) in tabbarList" :key="index" class="u-tab-item u-ellipsis-1"
          :class="[currentTab == item.id ? 'u-tab-item-active' : '']" :data-current="item.id"
          @tap.stop="swichMenu(index,item)">
          <view class="menu-name">{{item.name }}</view>
        </view>
        <view class="hack-tabbar"></view>
      </scroll-view>

      <!-- 右侧商品列表 -->
      <view class="right-wrap ">
        <scroll-view scroll-y class="right-box menu-scroll-view" @scrolltolower="loadMore" v-if="tabbarList.length">
          <view class="u-flex u-row-center" v-if="tabbarList[currentTab].image">
            <!-- <image class="category-img" :src="tabbarList[currentTab].image" mode="aspectFill"></image> -->
          </view>
          <!-- <view class="category-title">{{ tabbarList[currentTab].name }}</view> -->

          <view class="sh-big-card-wrap" style="margin: 22rpx 26rpx 30rpx 24rpx;" v-for="(item, index) in goodsList"
            :key="item.id" :style="item.discounts > (item.discount * 10) ? '' : 'filter: grayscale(100%)'">
            <view class="big-goods-card">
              <!-- @tap="jump('/pages/goods/detail', { id: item.id })" -->
              <view class="img-wrap">
                <image class="goods-img" :src="item.images[0]" mode="aspectFill"></image>
                <image class="" style="width: 92rpx;height: 92rpx;position: absolute;
									top: 38rpx;left: 28rpx;" :src="item.image" mode="widthFix"></image>
                <image class="" style="width: 88rpx;height: 72rpx;position: absolute;
									top: 0rpx;left: 0rpx;" :src="$IMG_URL + '/imgs/user/fx'+(index+1)+'.png'" mode="aspectFill"></image>
                <view class="x-f" style="width: 338rpx;height: 112rpx;position: absolute;
									top: 24rpx;left: 138rpx;align-items: center;justify-content: space-between;">
                  <view class="">
                    <view class="goods_title" :style="!index ? '' : 'color: #fff;'">
                      {{item.discount * 10}}<span style="font-size: 32rpx;">折</span>
                    </view>
                    <view class="goods_desc" style="margin-top: -10rpx;" :style="!index ? '' : 'color: #fff;'">
                      {{item.subtitle}}
                    </view>
                  </view>
                  <view class="">
                    <view class="" style="margin-top: -10rpx;" v-if="item.discount != '0.50'">
                      <span style="font-size: 30rpx;margin-top: -10rpx;"
                        :style="!index ? '' : 'color: #fff;'">￥{{item.price}}</span>
                    </view>
                    <view class="" style="text-align: right;position: relative;top: 34rpx;"
                      v-if="item.discounts > (item.discount * 10)" v-show="item.discount != '0.50'">
                      <image :class="isShowAddBtn == index?'scaleDrawBtn':''"
                        @tap.stop="addCart(item.sku_price[0],index)" v-if="!isCart(item.id)"
                        src="../../../static/imgs/add2.png" style="width: 42rpx;height: 42rpx;margin-left: 12rpx;">
                      </image>
                      <image :class="isShowAddBtn == index?'scaleDrawBtn':''"
                        @tap.stop="addCart(item.sku_price[0],index)" v-else src="../../../static/imgs/add1.png"
                        style="width: 42rpx;height: 42rpx;margin-left: 12rpx;">
                      </image>
                    </view>
                    <view class="" style="text-align: right;position: relative;top: 34rpx;min-width: 88rpx;color: #fff;"
                      v-else>
                      已拥有
                    </view>
                    <view class="" style="text-align: right;position: relative;top: 34rpx;height: 42rpx;" v-else>
                    </view>
                  </view>
                </view>
                <!-- <image class="goods-tag" v-if="item.is_hot && !item.activity"
									:src="$IMG_URL + '/goods/goods_hot_tag.png'" mode=""></image> -->
              </view>
              <!-- <view class="goods-title u-p-x-20 u-m-b-10 u-ellipsis-2">
								<view v-if="item.activity_type" class=" sm cu-tag radius title-tag u-m-r-10"
									:style="{ backgroundColor: typeMap[item.activity_type].tagBg, color: '#fff' }">
									{{ typeMap[item.activity_type].text }}
								</view>
								{{ item.title }}
							</view>
							<view class="goods-subtitle u-p-x-20 u-m-b-10 u-ellipsis-1">{{ item.subtitle }}</view> -->
              <!-- 满减，满折 -->
              <!-- <view class="u-p-x-20" v-if="item.activity_discounts_tags.length">
								<view class="tag-box u-m-b-10 u-m-r-10"
									v-for="(tag, index1) in item.activity_discounts_tags" :key="index1">{{ tag }}</view>
							</view>
							<view class="goods-progress u-p-x-20 u-flex u-m-b-10">
								<view style="width:230rpx;">
									<u-line-progress height="16" :show-percent="false" :percent="Number(item.percent)"
										active-color="#0099E5"></u-line-progress>
								</view>
								<view class="googs-send-num u-m-l-20">已售{{ item.sales }}件</view>
							</view> -->
              <view class="u-flex u-row-between u-p-x-20" v-if="0">
                <!-- <view class="price-box u-flex font-OPPOSANS">
									<view class="price">{{ item.price }}</view>
									<view class="origin-price u-m-l-10">￥{{ item.original_price }}</view>
								</view> -->
                <view class="cart-box">
                  <!-- 单规格 -->
                  <view class="" v-if="!item.activity">
                    <view v-if="!item.is_sku">
                      <image v-if="!isCart(item.id)" @tap.stop="addCart(item.sku_price[0])"
                        src="../../../static/imgs/add2.png" style="width: 42rpx;height: 42rpx;margin-left: 12rpx;">
                      </image>
                      <!-- <button v-if="!isCart(item.id)"
												:style="item.activity_type ? typeMap[item.activity_type].btnBg : ''"
												@tap.stop="addCart(item.sku_price[0])" class="u-reset-button cart-btn">
												加入洗衣车
											</button> -->
                      <view class="num-step" @tap.stop v-else>
                        <u-number-box :value="checkCart[item.id].num" :long-press="false" :min="0" :max="maxStep"
                          :step="1" :index="index" @min="onMin(item.id)" @plus="plus($event, item.sku_price[0])"
                          @change="onChangeNum($event, item.sku_price[0])"></u-number-box>
                      </view>
                    </view>
                    <!-- 多规格 -->
                    <button class="u-reset-button item-btn sel-sku "
                      :style="item.activity_type ? typeMap[item.activity_type].btnBg : ''" @tap.stop="selSku(item)"
                      v-else>
                      选规格
                    </button>
                  </view>
                  <button class="u-reset-button item-btn sel-sku"
                    :style="item.activity_type ? typeMap[item.activity_type].btnBg : ''" v-else>立即抢购</button>
                </view>
              </view>
            </view>
          </view>

          <!-- 缺省页 -->
          <shopro-empty v-if="isEmpty" marginTop="200rpx" :image="$IMG_URL + '/imgs/empty/empty_goods.png'"
            tipText="暂无该商品，还有更多好货等着你噢~"></shopro-empty>

          <!-- 加载更多 -->
          <!-- <u-loadmore v-if="goodsList.length" height="80rpx" :status="loadStatus" icon-type="flower"
						color="#ccc" /> -->
          <view class="hack-tabbar"></view>
        </scroll-view>
      </view>
    </view>

    <!-- 洗衣车 -->
    <view class="cart-boxs x-f">
      <view class="cart-left flex-sub x-f">
        <view class="cart-img-box" @tap="onShowCartList">
          <image class="cart-img" src="../../../static/imgs/cart2.png" mode=""></image>
          <view class="cu-tag badge" v-if="totalCount.totalNum">
            {{ totalCount.totalNum }}
          </view>
        </view>
        <view class="price-box x-f">
          <view class="" style="font-size: 28rpx;margin-right: 42rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #888888;">
            原价：{{ totalCount.totalPrice.toFixed(2) }}
            <!-- 共{{ totalCount.totalNum }}张 -->
          </view>
          合计：<text
            class="price">{{ (totalCount.totalNum >=3 ? totalCount.totalPrice / 2 : totalCount.totalPrice).toFixed(2) }}</text>
        </view>
      </view>
      <button class="cu-btn pay-btn" @tap="onPay" :disabled="!isSel">去结算</button>
      <!-- 洗衣车商品列表 -->

      <view class="cart-list-box page_box" :class="showCartList ? '' : 'hide-cart-list'">
        <view class="head_box x-bc cart-list__head px20">
          <u-checkbox @change="onAllSel" activeColor="#0099E5" shape="circle" :value="allSelected">
            全选（{{ totalCount.totalNum }}）</u-checkbox>
          <!-- <label class="check-all x-f" @tap="onAllSel">
						<radio :checked="allSelected" :class="{ checked: allSelected }" class="check-all-radio blue"></radio>
						<text>全选</text>
					</label> -->
          <view class="delete-box" @tap="deleteAll">
            <image class="cart-img" src="../../../static/imgs/delete.png"
              style="width: 22rpx;height: 22rpx;margin-right: 10rpx;" mode=""></image>
            <text>清空洗衣车</text>
          </view>
        </view>
        <view class="block cart-list">
          <checkbox-group class="block" v-if="cartList.length">
            <view class="collect-list x-start" v-for="(g, index) in cartList" :key="index">
              <!-- <view class="x-c" style="height: 200rpx;" @tap="onSel(index, g.checked)">
								<checkbox :checked="g.checked" :class="{ checked: g.checked }"
									class="goods-radio round blue"></checkbox>
							</view> -->
              <!-- 	<shopro-mini-card :detail="g.goods" :sku="g.sku_price" :type="'sku'">
								<block slot="goodsBottom"> -->
              <image class="" style="min-width: 120rpx;width: 120rpx;height: 120rpx;margin-right: 25rpx;"
                :src="g.goods.images.length>1 ? g.goods.images[1] : g.goods.image" mode="widthFix">
              </image>
              <view class="x-bc price-box" style="align-items: flex-end;">
                <view class="">
                  <view class="price_title">{{ g.goods.title }}</view>
                  <view class="price_new">{{ g.sku_price.price }}</view>
                </view>
                <view class="num-step">
                  <image @tap.stop="onChangeNums({value:0}, g)" src="../../../static/imgs/delete.png"
                    style="width: 42rpx;height: 42rpx;margin-left: 12rpx;">
                  </image>
                  <!-- <uni-number-box :fontsize='72' @change="onChangeNum($event, g, index)"
										v-model="g.goods_num" :step="1" :min="0"></uni-number-box> -->
                </view>
              </view>
              <!-- </block> -->
              <!-- </shopro-mini-card> -->
            </view>
          </checkbox-group>
        </view>
      </view>
    </view>

    <!-- 遮罩 -->
    <view class="mask" @tap="hideCartList" v-if="showCartList"></view>
    <!-- 规格弹窗 -->
    <shopro-sku v-if="showSku && goodsInfo.id" v-model="showSku" :goodsInfo="goodsInfo" :buyType="'cart'">
    </shopro-sku>
  </view>
</template>

<script>
  import {
    mapMutations,
    mapActions,
    mapState,
    mapGetters
  } from 'vuex';
  export default {
    components: {},
    data() {
      return {
        isShowAddBtn: -2,
        showSku: false, //是否显示规格弹窗
        isEmpty: false,
        currentTab: 420,
        categoryID: 420, //分类id
        scrollLeftTop: 0, //左边滚动距离
        menuHeight: 0, // 左边菜单的高度
        menuItemHeight: 0, // 左边菜单item的高度
        tabbarList: [], //左侧分类列表
        goodsList: [], //商品列表
        goodsInfo: {}, //点击商品详情
        numberDisabled: false, //洗衣车计数器
        loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
        currentPage: 1,
        lastPage: 1,
        maxStep: 999,
        typeMap: {
          seckill: {
            text: '秒杀',
            tagBg: '#FF5854',
            goodsBg: '/imgs/tag/seckill_x_bg.png',
            btnText: '去抢购',
            btnBg: 'background: linear-gradient(90deg, #D01325, #ED3C30);'
          },
          groupon: {
            text: '拼团',
            tagBg: '#FE832A',
            goodsBg: '/imgs/tag/groupon_x_bg.png',
            btnText: '马上拼',
            btnBg: 'background: linear-gradient(90deg, #FF6600 0%, #FE832A 100%);'
          }
        },
		fromLucky:0,
        showCartList: false,
		maxDiscountItem:{}
      };
    },
    props: {
      categoryStyleId: {
        type: Number,
        default: 419
      },
      currentTabIndex: {
        type: Number,
        default: 420
      },
	  toformLucky: {
	    type: Number,
	    default: 0
	  }
    },
    watch: {
      currentTabIndex(newIndex) {
		
        this.currentTab = newIndex;
		console.log(this.currentTab,'轮盘传值id');
        this.categoryID = newIndex;
      },
	  toformLucky(newIndex) {
	    this.fromLucky = newIndex;
	  }
    },
    computed: {
      ...mapGetters(['totalCount', 'isSel', 'cartNum', 'cartList', 'allSelected', 'isLogin']),
      // 洗衣车检测
      checkCart() {
        let obj = {};
        this.cartList.forEach(item => {
          obj[item.goods_id] = {
            num: item.goods_num,
            cartOrderId: item.id
          };
        });
        return obj;
      }
    },
    created() {
      console.log('%c当前分类：快速购买', 'color:green;background:yellow');
      this.getCategory();
    },
    mounted() {
      console.log(this.currentTab, "333333300");
      this.getGoodsList();
    },
    methods: {
      ...mapActions(['getCartList', 'changeCartList', 'addCartGoods']),
      ...mapMutations(['changeAllSellect']),
      // 显示洗衣车列表
      onShowCartList() {
        console.log('onShowCartList')
        this.showCartList = !this.showCartList;
        console.log(this.showCartList)
      },
      hideCartList() {
        this.showCartList = false;
      },
      // 全选
      onAllSel() {
        let that = this;
        that.$store.commit('changeAllSellect'); //按钮切换全选。
        that.$store.commit('getAllSellectCartList', that.allSelected); //列表全选
      },
      // 单选
      onSel(index, flag) {
        let that = this;
        that.$store.commit('selectItem', {
          index,
          flag
        });
      },
      // 结算
      onPay() {
        let that = this;
        let {
          cartList
        } = this;
        if (this.isSel) {
          let confirmcartList = [];
          let isActivity = false;
          for (let item of this.cartList) {
            if (item.checked) {
              if (item.cart_type === 'invalid') {
                this.$u.toast('商品已失效');
                return false;
              }
              if (item.cart_type === 'activity') {
                isActivity = true;
              }
              confirmcartList.push({
                goods_id: item.goods_id,
                sku_price_id: item.sku_price_id,
                goods_price: this.totalPrice,
                goods_num: item.goods_num
              });
            }
          }
          if (confirmcartList.length > 1 && isActivity) {
            this.$u.toast('活动商品只能单独购买');
            return false;
          }
          // that.jump('/pages/order/confirm', {
          // 	goodsList: confirmcartList,
          // 	from: 'cart'
          // });
          if (uni.getStorageSync("indexa") == null) {
            that.$http(
                "order.createOrder", {
                  goods_list: confirmcartList,
                  from: 'goods',
                  address_id: 0,
                  coupons_id: 0,
                  yuyue_time: '',
                  remark: '',
                  order_type: that.orderType,
                  buy_type: that.grouponBuyType,
                  groupon_id: 0,
                  invoice: {},
                  goods_id: "",
                  fromLucky: ""
                },
                "提交中..."
              )
              .then((res) => {
                console.log(res.code, "000000");
                if (res.code === 1) {
                  that.getCartList();
                  // that.$Router.replace({
                  that.$Router.push({
                    path: res.data.status > 0 ?
                      `/pages/order/payment/result` : `/pages/order/payment/method`,
                    query: {
                      orderId: res.data.id,
                      payState: res.data.status > 0 ? "success" : "paying",
                      orderType: "goods",
                    },
                  });
                }
              });
          } else {
            that.$http(
                "order.createOrder", {
                  goods_list: confirmcartList,
                  from: 'goods',
                  address_id: 0,
                  coupons_id: 0,
                  yuyue_time: '',
                  remark: '',
                  order_type: that.orderType,
                  buy_type: that.grouponBuyType,
                  groupon_id: 0,
                  invoice: {},
                  goods_id: confirmcartList[0].goods_id,
                  fromLucky: 1
                },
                "提交中..."
              )
              .then((res) => {
                console.log(res.code, "000000");
                if (res.code === 1) {
                  that.getCartList();
                  // that.$Router.replace({
                  that.$Router.push({
                    path: res.data.status > 0 ?
                      `/pages/order/payment/result` : `/pages/order/payment/method`,
                    query: {
                      orderId: res.data.id,
                      payState: res.data.status > 0 ? "success" : "paying",
                      orderType: "goods",
                    },
                  });
                }
              });
          }

        }
      },
      // 清空洗衣车
      deleteAll() {
        let that = this;
        let {
          cartList
        } = this;
        let selectedIdsArray = [];
        cartList.map(item => {
          if (item.checked) {
            selectedIdsArray.push(item.id);
          }
        });
        if (selectedIdsArray.length == cartList.length) {
          this.showCartList = false;
        }
        this.changeCartList({
          ids: selectedIdsArray,
          art: 'delete'
        });
      },

      // 跳转详情
      toGoodDetail(id) {
        // this.$Router.push({
        // 	path: '/pages/goods/detail',
        // 	query: {
        // 		id: id
        // 	}
        // });
      },

      // 百分比
      getProgress(sales, stock) {
        let unit = '';
        if (stock + sales > 0) {
          let num = (sales / (sales + stock)) * 100;
          unit = num.toFixed(2) + '%';
        } else {
          unit = '0%';
        }
        return unit;
      },

      // 加载更多
      loadMore() {
        if (this.currentPage < this.lastPage) {
          this.currentPage += 1;
          this.getGoodsList();
        }
      },

      // 获取分类
      async getCategory() {
        const tabbarData = await this.$http('category.detail', {
          id: 419
        });
        this.tabbarList = tabbarData.data.children;
        uni.getStorageInfo({
          success: function(res) {
            // 判断缓存是否存在
            if (res.keys.includes('yourCacheKey')) {
              if (uni.getStorageSync("indexa") == null) {
                this.categoryID = this.tabbarList[0]?.id;
              } else {
                this.categoryID = uni.getStorageSync("indexa")
              }
            } else {
              this.categoryID = this.tabbarList[0]?.id;
            }
          }
        });


      },

      // 获取分类商品
      getGoodsList() {
        console.log(this.categoryID, '列表id--------');
        let that = this;
        that.loadStatus = 'loading';
        that.$http(
            'goods.lists', {
              category_id: that.categoryID,
              is_card: 1,
              page: that.currentPage
            },
            '加载中...'
          )
          .then(res => {
            if (res.code === 1) {
              that.goodsList = [...that.goodsList, ...res.data.data];
              that.goodsList.map(item => {
                item.percent = item.stock + item.sales > 0 ? ((item.sales / (item.sales + item
                  .stock)) * 100).toFixed(2) : 0;
              });
			  console.log(this.fromLucky,this.currentTabIndex,this.currentTab);
			  if (this.fromLucky==1 && this.currentTabIndex == this.currentTab) {
			      console.log('是从转盘页面跳转而来');
			  
			      // 找到 discounts 小于的项
			      const smallerDiscounts = this.goodsList.filter(item => item.discount * 10 < item.discounts);
			  
			      if (smallerDiscounts.length > 0) {
			          // 找到 discounts 最大的项
			          const maxDiscountItem = smallerDiscounts.reduce((maxItem, currentItem) => {
			              return currentItem.discount > maxItem.discount ? currentItem : maxItem;
			          }, smallerDiscounts[0]);
					
			          console.log(maxDiscountItem, 'discount 小于 discounts 中最大的数据');
			  
			          // 修改最大 discount 对应的某个值
			          if (maxDiscountItem) {
			              maxDiscountItem.price = 1; // 改为1块钱
						  this.maxDiscountItem = maxDiscountItem
			          }
			      }
			  }
              that.isEmpty = !that.goodsList.length;
              that.lastPage = res.data.last_page;
              that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
            }
          })
          .then(() => {
            that.isLogin && that.getCartList();
          });
      },

      // 点击左边的栏目切换
      async swichMenu(index, item) {
        if (item.id == this.currentTab) return;
        this.currentTab = item.id;
        this.categoryID = this.tabbarList[index].id;
        this.currentPage = 1;
        this.lastPage = 1;
        this.goodsList = [];
        await this.getGoodsList();
        // 如果为0，意味着尚未初始化
        if (this.menuHeight == 0 || this.menuItemHeight == 0) {
          await this.getElRect('menu-scroll-view', 'menuHeight');
          await this.getElRect('u-tab-item', 'menuItemHeight');
        }
        // 将菜单菜单活动item垂直居中
        this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
      },

      // 获取一个目标元素的高度
      getElRect(elClass, dataVal) {
        new Promise((resolve, reject) => {
          const query = uni.createSelectorQuery().in(this);
          query
            .select('.' + elClass)
            .fields({
              size: true
            }, res => {
              // 如果节点尚未生成，res值为null，循环调用执行
              if (!res) {
                setTimeout(() => {
                  this.getElRect(elClass);
                }, 10);
                return;
              }
              this[dataVal] = res.height;
            })
            .exec();
        });
      },

      // 加入洗衣车
      addCart(goods, index) {
        this.isShowAddBtn = index //css缩放效果 1 开启 2关闭
        setTimeout(() => {
          this.isShowAddBtn = -2
        }, 300)
        let obj = {
          goods_id: goods.goods_id,
          goods_num: 1,
          sku_price_id: goods.id,
          goods_price: goods.price
        };
        let confirmGoodsList = {
          list: [obj],
          from: 'goods',
		  fromLucky:this.fromLucky,//是否一元
		  maxDiscountItem:this.maxDiscountItem //哪个需要改为一元
        };
        this.addCartGoods(confirmGoodsList).then(res => {
          if (res.code === 1) {
            uni.showToast({
              title: res.msg,
              duration: 5000
            });
            // this.$u.toast(res.msg);
            // this.getCartList();
          }
        });
      },
      // 检测商品在洗衣车中的下标
      checkGoodsIndex(id) {
        let cIndex = 0;
        this.cartList.forEach((item, index) => {
          if (id == item.goods_id) {
            cIndex = index;
          }
        });
        return cIndex;
      },

      // 到达最小值
      onMin(goodsId) {
        const that = this;
        let cartGoodId = 0;
        cartGoodId = this.cartList.filter(item => item.goods_id === goodsId)[0].id;
        uni.showModal({
          title: '删除提示',
          confirmColor: '#0099E5',
          content: `是否确认从洗衣车中删除此商品?`,
          success: res => {
            res.confirm && this.changeCartList({
              ids: [cartGoodId],
              art: 'delete'
            });
          }
        });
      },

      // 增加
      plus(e, sku) {
        if (e.value >= sku.stock) {
          this.maxStep = sku.stock > 999 ? 999 : sku.stock;
          this.$u.toast('库存不足');
          return;
        }
        if (this.detail.activity_type === 'seckill' || this.detail.activity_type === 'groupon') {
          let rules = this.detail.activity.rules;
          if (rules.limit_buy != 0 && e.value >= rules.limit_buy) {
            this.maxStep = rules.limit_buy;
            this.$u.toast('本次活动最多购买' + rules.limit_buy + '件');
            return;
          }
        }
      },

      // 更改商品数
      async onChangeNum(e, sku) {
        let gIndex = this.checkGoodsIndex(sku.goods_id);
        if (e.value != this.checkCart[sku.goods_id].num) {
          uni.showLoading({
            mask: true
          });
          this.$set(this.cartList[gIndex], 'goods_num', +e.value);
          await this.changeCartList({
            ids: [this.checkCart[sku.goods_id].cartOrderId],
            goodsNum: +e.value,
            art: 'change'
          });
          await uni.hideLoading();
        }
      },
      onChangeNums(e, sku) {
        this.changeCartList({
          ids: [sku.id],
          // ids: [sku.goods_id],
          art: 'delete'
        });
      },
      // 检测是否为洗衣车商品
      isCart(id) {
        let goodsId = id + '';
        return Object.keys(this.checkCart).includes(goodsId);
      },

      // 添加洗衣车
      async selSku(info) {
        this.goodsInfo = {};
        this.getGoodsDetail(info.id);
        this.showSku = true;
      },
      // 商品详情
      getGoodsDetail(id) {
        let that = this;
        that.$http('goods.detail', {
          id: id
        }).then(res => {
          if (res.code === 1) {
            that.goodsInfo = res.data;
          }
        });
      },

      // 路由跳转
      jump(path, parmas) {
        this.$Router.push({
          path: path,
          query: parmas
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .hack-tabbar {
    height: calc(100rpx + env(safe-area-inset-bottom) / 2);
    width: 100%;
  }

  .scaleDrawBtn {
    -webkit-animation-name: scaleDraw;
    /*关键帧名称*/
    -webkit-animation-timing-function: linear;
    /*动画的速度曲线*/
    -webkit-animation-iteration-count: 1;
    /*动画播放的次数*/
    -webkit-animation-duration: .5s;
    /*动画所花费的时间*/
  }

  @keyframes scaleDraw {

    /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
    0% {
      transform: scale(1);
      /*开始为原始大小*/
    }

    100% {
      transform: scale(0.8);
    }
  }


  // 最外层结构包裹
  .catgory-wrap {
    height: calc(100vh);
    /* #ifdef H5 */
    height: calc(100vh - var(--window-top));
    /* #endif */
    display: flex;
    flex-direction: column;
  }

  .wrapper-box {
    flex: 1;
    display: flex;
    overflow: hidden;

    // 左侧menu
    .u-tab-view {
      width: 200rpx;
      height: 100%;

      .u-tab-item {
        height: 84rpx;
        background: #f6f6f6;
        width: 200rpx;
        // padding-left: 16rpx;
        font-size: 26rpx;
        color: #444;
        font-weight: 400;
        line-height: 84rpx;
      }

      .menu-name {
        padding-left: 16rpx;
      }

      .u-tab-item-active {
        position: relative;
        color: #000;
        font-size: 30rpx;
        font-weight: bold;
        background: #fff;

        .menu-name {
          width: 160rpx;
          margin: 12rpx 0;
          border-radius: 0 30rpx 30rpx 0;
          height: 60rpx;
          line-height: 60rpx;
          background-color: rgb(0, 153, 229);
          color: #fff;
        }
      }

      // .u-tab-item-active::before {
      // 	content: '';
      // 	position: absolute;
      // 	border-left: 4px solid #0099E5;
      // 	height: 32rpx;
      // 	left: 0;
      // 	top: 26rpx;
      // }
    }
  }

  // 右侧商品滚动
  .right-wrap {
    background-color: #fff;
    height: 100%;
    width: 100%;

    .category-img {
      width: 505rpx;
      height: 150rpx;
      background: #ccc;
      margin: 20rpx auto;
      border-radius: 10rpx;
    }

    .category-title {
      font-size: 30rpx;
      font-weight: bold;
      color: #000;
      margin: 20rpx;
    }

    .right-box {
      height: 100%;
    }
  }

  .big-goods-card {
    // background-color: #fff;
    border-radius: 20rpx;
    width: 100%;
    // box-shadow: 0 0 8rpx 2rpx rgba(199, 199, 199, 0.3);
    // padding-bottom: 20rpx;

    .img-wrap {
      position: relative;
      overflow: hidden;
      height: 170rpx;
      width: 100%;
      width: 500rpx;

      .goods-img {
        width: 100%;
        height: 170rpx;
        border-radius: 20rpx 20rpx 0 0;
        background: #f5f5f5;
      }

      .goods-tag {
        position: absolute;
        top: 16rpx;
        left: 16rpx;
        width: 88rpx;
        height: 88rpx;
      }
    }

    .goods-title {
      font-size: 30rpx;
      font-weight: bold;
      color: #333333;
      line-height: 36rpx;
      padding-top: 6rpx;

      .title-tag {
        transform: scale(0.9);
        position: relative;
        top: -6rpx;
      }
    }

    .goods-subtitle {
      font-size: 24rpx;
      font-weight: 400;
      color: #999999;
      line-height: 36rpx;
      width: 480rpx;
    }

    .tag-box {
      border: 1rpx solid #ff0000;
      display: inline-block;
      font-size: 20rpx;
      line-height: 30rpx;
      padding: 0 10rpx;
      color: #ff0000;
      border-radius: 8rpx;
    }

    .goods-progress {
      .cu-progress {
        width: 200rpx;
        height: 20rpx;
        background: rgba(#ff6361, 0.2);
        overflow: visible;
        position: relative;

        .progress--ing {
          background: #ff6361;
          border-radius: 20rpx;
        }

        .round-tag {
          position: absolute;
          bottom: 0;
          width: 20rpx;
          height: 28rpx;
          margin-left: -10rpx;

          .round-tag-img {
            width: 20rpx;
            height: 28rpx;
          }
        }
      }

      .googs-send-num {
        font-size: 24rpx;
        font-weight: 400;
        color: #bebebe;
      }
    }

    .price-box {
      vertical-align: text-bottom;

      .price_new {
        font-size: 36rpx;
        color: #ff0000;
        font-weight: 600;
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 800;
        color: #F95641;

        &::before {
          content: '￥';
          font-size: 28rpx;
        }

        vertical-align: text-bottom;
      }

      .origin-price {
        vertical-align: text-bottom;
        font-size: 26rpx;
        font-weight: 400;
        text-decoration: line-through;
        color: #c4c4c4;
      }
    }

    .cart-box {

      .cart-btn,
      .sel-sku {
        width: 172rpx;
        line-height: 58rpx;
        background: linear-gradient(90deg, #0099E5, #0099E5);
        box-shadow: 0px 7rpx 6rpx 0px rgba(0, 153, 229, 0.22);
        border-radius: 30rpx;
        padding: 0;
        font-size: 26rpx;
        font-weight: 500;
        color: #ffffff;
      }
    }
  }

  // 洗衣车
  .cart-boxs {
    position: absolute;
    bottom: calc(100rpx + env(safe-area-inset-bottom) / 2);
    bottom: 0rpx;
    z-index: 77;
    height: 100rpx;
    width: 750rpx;
    background: #fff;

    .cart-left {
      background: #fff;
      // background: linear-gradient(rgba(103, 104, 105, 1), rgba(82, 82, 82, 1));
      height: 100rpx;
      position: relative;

      .cart-img-box {
        position: absolute;
        left: 50rpx;
        width: 96rpx;
        height: 96rpx;
        top: -20rpx;
        z-index: 88;

        .cart-img {
          width: 96rpx;
          height: 96rpx;
        }
      }

      .price-box {
        padding-left: 180rpx;

        .original-price {
          font-size: 22rpx;
          font-family: OPPOSans;
          font-weight: 400;
          text-decoration: line-through;
          color: rgba(153, 153, 153, 1);
          margin-left: 10rpx;
        }

        .price {
          font-size: 32rpx;
          font-family: OPPOSans;
          font-weight: 500;
          color: rgba(250, 253, 253, 1);
          font-size: 30rpx;
          font-family: PingFang SC;
          font-weight: 800;
          color: #F95641;

          &::before {
            content: '￥';
            font-size: 28rpx;
          }
        }
      }
    }

    .pay-btn {
      width: 205rpx;
      height: 100rpx;
      border-radius: 0;
      background: linear-gradient(90deg, #4FB8FF, #4782FF);
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);

      width: 200rpx;
      height: 76rpx;
      background: #0099E5;
      border-radius: 38rpx;
    }
  }

  .content_box {
    margin-top: 1upx;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    height: 100vh;
    margin-bottom: 40px;
  }

  .wrapper-box {
    flex: 1;
    margin-top: 1upx;
    height: 100vh;
  }

  .scroll-box {
    height: 100vh;
    flex: 1;
    background: #fff;
  }

  .left {
    width: 200upx;
    height: 100vh;
    flex: 1;

    .list-active {
      background: #fff;
      color: #333333 !important;
      font-weight: bold !important;
    }

    .line-active {
      background: #0079ee;
    }

    .type-list {
      height: 84upx;
      position: relative;
      width: 200upx;
      font-size: 28upx;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);

      .line {
        width: 10upx;
        height: 100%;
        position: absolute;
        left: 0;
      }
    }
  }

  .right {
    padding: 0 30upx;
    flex: 1;
    height: 100vh;

    .item-list {
      .type-box {
        min-height: 84rpx;

        .type-title {
          font-size: 28rpx;
          font-weight: bold;
          line-height: 84rpx;
        }

        .more {
          font-size: 26rpx;
          color: #999;
        }

        .type-img {
          width: 505rpx;
          height: 150rpx;
          background: #ccc;
          margin: 10rpx 0;
          border-radius: 10rpx;
        }
      }

      .item-box {
        flex-wrap: wrap;

        .goods-item {
          .goods-item--right {
            // @include flex($direction: column, $justify: around, $align: top);
            width: 100%;
            position: relative;
            height: 140rpx;
            margin-left: 20rpx;
          }

          .item-right--bottom {
            width: 100%;
          }

          .item-img {
            width: 140rpx;
            height: 140rpx;
            border-radius: 10rpx;
            // background-color: #ccc;
          }

          .item-right--title {
            width: 350rpx;
            font-weight: bold;
            font-size: 26rpx;
          }

          .item-right--sales {
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
          }

          .price-box {
            .current-price {
              color: #e1212b;
              font-size: 28rpx;

              .current-price--unit {
                font-size: 24rpx;
              }
            }

            .origin-price {
              color: #999;
              font-size: 18rpx;
              margin-left: 12rpx;

              .origin-price--unit {
                font-size: 14rpx;
              }
            }
          }

          .item-btn {
            background: none;
            position: absolute;
            bottom: 0;
            right: 0rpx;
            padding: 0;

            .cuIcon-roundaddfill {
              color: #0079ee;
              font-size: 40rpx;
            }
          }

          .sel-sku {
            width: 120rpx;
            height: 40rpx;
            background: #0079ee;
            border-radius: 20rpx;
            font-size: 22rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(250, 253, 253, 1);
          }

          .num-step {
            /deep/.uni-numbox__value {
              width: 32rpx;
            }
          }
        }
      }
    }
  }

  .goods_title {
    // height: 88rpx;
    font-size: 72rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #232321;
  }

  .goods_desc {
    font-size: 20rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #232321;
  }

  .mask {
    position: fixed;
    background: rgba(#000, 0.3);
    width: 100%;
    height: 100%;
  }

  .hide-cart-list {
    transform: scaleY(0);
    transform-origin: center bottom;
    transition: all linear 0.1s;
  }

  .cart-list-box {
    position: absolute;
    width: 750rpx;
    bottom: 100rpx;
    background: #fff;
    height: 700rpx;
    z-index: 66;
    transform-origin: center bottom;
    transition: all linear 0.1s;
    border-radius: 40rpx 40rpx 0 0;

    .cart-list__head {
      height: 90rpx;
      border-bottom: 1rpx solid rgba(#dfdfdf, 0.5);
      background: rgb(214, 239, 251);

      .check-all {
        font-size: 28rpx;

        .check-all-radio {
          transform: scale(0.7);
          color: #0099E5;
        }
      }

      .delete-box {
        font-size: 26rpx;
        font-weight: 500;
        color: rgba(153, 153, 153, 1);
        font-size: 26rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #666666;

        .cuIcon-delete {
          font-size: 30rpx;
          margin-right: 10rpx;
        }
      }
    }

    // 洗衣车列表
    .block {
      flex: 1;
      overflow-y: auto;
    }

    .collect-list {
      padding: 0 20rpx;
      background: #fff;
      margin-top: 20rpx;

      /deep/ .goods-title {
        width: 420rpx !important;
      }

      .tag-box {
        .tag1 {
          line-height: 36rpx;
          padding: 0 8rpx;
          font-size: 18rpx;
          color: rgba(#fff, 0.9);
          background: #0099E5;
          display: inline-block;
          box-sizing: border-box;
        }

        .tag2 {
          line-height: 34rpx;
          padding: 0 8rpx;
          font-size: 18rpx;
          color: rgba(#0099E5, 0.9);
          background: #fff;
          border-top: 1rpx solid #0099E5;
          border-right: 1rpx solid #0099E5;
          border-bottom: 1rpx solid #0099E5;
          display: inline-block;
          box-sizing: border-box;
        }
      }

      .goods-radio {
        transform: scale(0.7);
        margin-right: 20rpx;
        // background:  #0099E5;
      }

      .price-box {
        width: 100%;

        .price {
          color: #e1212b;
        }
      }
    }

    .price-box {
      border-bottom: 2rpx solid rgb(241, 241, 241);
      margin-bottom: 20rpx;
      padding-bottom: 20rpx;
    }

    .price_title {
      font-size: 30rpx;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #292A37;
      margin-bottom: 46rpx;
    }

    .price_new {
      font-size: 36rpx;
      color: #ff0000;
      font-weight: 600;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 800;
      color: #F95641;

      &::before {
        content: '￥';
        font-size: 22rpx;
      }
    }
  }
</style>